import { computed, defineComponent, watch } from 'vue'
import { useRoute } from 'vue-router'
const Topicfy = defineComponent({
    props: {
        // 解析得到的标题列表
        heads: {
            type: Array
        }
    },
    setup(props) {
        const topics = computed(() => {
            const tocItems = []

            // 标题计数器
            let count = 0

            const add = (text, level) => {
                count++

                const item = { anchor: `heading-${count}`, level, text }

                if (tocItems.length === 0) {
                    // 第一个 item 直接 push
                    tocItems.push(item)
                } else {
                    let lastItem = tocItems[tocItems.length - 1] // 最后一个 item

                    if (item.level > lastItem.level) {
                        // item 是 lastItem 的 children
                        for (let i = lastItem.level + 1; i <= 6; i++) {
                            const { children } = lastItem
                            if (!children) {
                                // 如果 children 不存在
                                lastItem.children = [item]
                                break
                            }
                            // 重置 lastItem 为 children 的最后一个 item
                            lastItem = children[children.length - 1]

                            if (item.level <= lastItem.level) {
                                // item level 小于或等于 lastItem level 都视为与 children 同级
                                children.push(item)
                                break
                            }
                        }
                    } else {
                        // 置于最顶级
                        tocItems.push(item)
                    }
                }
            }

            props.heads?.forEach((item) => {
                add(item.text, item.level)
            })
            return tocItems
        })

        const link = (tocItem) => {
            const route = useRoute()
            return (
              <a-anchor-link
                href={`${route.path}#${tocItem.text}`}
                // href={`/#${route.path}#${tocItem.text}`}
                title={tocItem.text}
              >
                {tocItem.children && tocItem.children.map((item) => link(item))}
              </a-anchor-link>
            );
        }

        return () => (
            <a-anchor affix={false} showInkInFixed={true}>
                {topics.value.map((item) => link(item))}
            </a-anchor>
        )
    }
})

export default Topicfy
